<template>
  <div class="mod-config">
    <basic-container>
      <navigation :sign="{a:true,b:false,c:false,d:false,e:false}"></navigation>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">录入事件汇总查询</div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="姓名">
            <el-input v-model="dataForm.userName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="dataForm.userCode" placeholder="员工编号"></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-input v-model="dataForm.userCode" placeholder="所属部门"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" :disabled="deptId===''" class="marginLeft" @click="getDataList()">检索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" v-loading="dataListLoading" stripe class="avue-crud" height="450px">
          <el-table-column prop="" label="序号" :formatter="nShowIndex" width="70"></el-table-column>
          <el-table-column prop="userCode" label="人员编号" width="100"></el-table-column>
          <el-table-column prop="userName" label="人员名称" width="100"></el-table-column>
          <el-table-column prop="lx" label="类型" width="80"></el-table-column>
          <el-table-column prop="jjxName" label="奖金项名称" width="180"></el-table-column>
          <el-table-column prop="jjJe" label="奖惩金额" width="90" :formatter="nFormatterShow"></el-table-column>
          <el-table-column prop="jjDate" label="奖惩时间" width="120" :formatter="fTTable"></el-table-column>
          <el-table-column prop="jjFfzt" label="放发状态" width="90"></el-table-column>
          <el-table-column prop="jjSm" label="奖惩说明">
            <template slot-scope="scope">
              {{ scope.row.jjSm.length > 50 ? scope.row.jjSm.substring(0, 50)+'......' : scope.row.jjSm }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.jjFfzt==='已发放'" v-if="permissions.jiangjin_jiangjingrjcjlb_edit" type="primary" plain @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button :disabled="scope.row.jjFfzt==='已发放'" v-if="permissions.jiangjin_jiangjingrjcjlb_del" type="danger" plain @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj} from '@/api/jiangjin/jiangjingrjcjlb'
import {mapGetters} from 'vuex'
import {getJiangJinBm} from '@/api/admin/dept'


export default {
  data() {
    return {
      dataForm: {
        userName: '',
        userCode: '',
        jjFfzt: '',
        jjDeptId: ''
      },
      options: [{value: '未发放', label: '未发放'}, {value: '已发放', label: '已发放'}],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      addOrUpdateAllVisible: false,
      deptId: '',//负责部门ID
      deptName: '',//负责部门名称
    }
  },
  components: {
  },
  created() {

  },
  mounted() {
    this.getJiangJinJg();
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //获取奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then(res => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.deptId = "";
          this.deptName = "";
          this.deptId = res.data.data[0].deptId;
          this.deptName = res.data.data[0].name;
          this.getDataList();
        } else {
          this.$notify.closeAll();
          this.$notify.error("没有相关负责部门")
          this.deptName = "无相关负责部门";
        }
      });
    },
    //列显示重新定义
    nFormatterShow(row, column, cellValue, index) {
      if (cellValue) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1;
    },
    fTTable(row, column, cellValue, index) {
      if (cellValue) {
        return this.$moment(cellValue).format("YYYY-MM-DD");
      } else {
        return cellValue;
      }
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$set(this.dataForm, "jjDeptId", this.deptId);
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, this.deptId)
      })
    },
    addOrUpdateAll(){
      this.addOrUpdateAllVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdateAll.init(this.deptId)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$notify.closeAll();
        this.$notify.success('删除成功')
        this.getDataList()
      })
    }
  }
}
</script>
